<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>通知样式</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .layout {
            width: 400px;
            height: 100px;
            margin: 10px auto;
        }

        .row {
            margin-bottom: 20px;
            border-radius: 4px;
            color: #fff;
            padding: 2px 10px;
        }


        .row>span {
            float: right;
            font-size: 23px;
            font-weight: bold;
            cursor: pointer;
        }
        .row>h3 {
            padding: 10px;
            font-size: 23px;
        }
        .row>p {
            padding: 10px;
        }

        .success {
            background: green;
        }

        .info {
            background: blue;
        }

        .alert {
            background: red;
        }

        .warn {
            background: orange;
        }
    </style>
</head>
<body>
    <div class="layout">
        <div class="row success">
            <span>×</span>
            <h3>恭喜你</h3>
            <p>获得本周学霸，继续加油吧</p>
        </div>
        <div class="row info">
            <span>×</span>
            <h3>通知</h3>
            <p>晚上上课，不要忘了</p>
        </div>
        <div class="row alert">
            <span>×</span>
            <h3>天啊</h3>
            <p>竟然几天没做任务</p>
        </div>
        <div class="row warn">
            <span>×</span>
            <h3>警告</h3>
            <p>学如逆水行舟，不进则退</p>
        </div>
    </div>

</body>
</html>